<script setup lang="ts">
definePageMeta({
  // 禁用默认布局（不显示左侧菜单）
  layout: false,
});

import type { FormInstance } from "element-plus";

// 获取 app.config.ts 中的配置
const appConfig = useAppConfig();
// 初始化反馈结果 -- 注册反馈结果
const callbackMessage = useCallbackMessage();

const formData = reactive({ account: "", password: "", passwordConfirm: "" });
const ref_form = ref<FormInstance>();

// 按钮--注册
const signUp = async (formEl: FormInstance | undefined) => {
  // 初始化注册反馈结果
  callbackMessage.value = {
    show: false,
    valid: true,
    content: "",
  };
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        await $fetch("/api/user/signUp", { body: formData, method: "POST" });
        callbackMessage.value = {
          show: true,
          valid: true,
          content: "注册成功，即将跳转到登录页面",
        };
        // 延迟1s，等待注册成功反馈显示出来
        setTimeout(() => {
          navigateTo("/user/login");
        }, 1000);
      } catch (e: any) {
        callbackMessage.value = {
          show: true,
          valid: false,
          content: e.data.statusMessage,
        };
      }
    }
  });
};

// 自定义表单校验 -- 两次密码输入是否一致
const validator_passwordAgain = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== formData.password) {
    callback(new Error("两次密码不一样"));
  } else {
    callback();
  }
};
</script>
<template>
  <div class="flex">
    <div class="w-screen h-screen lt-md:position-absolute! z--1 left-0 top-0">
      <img
        class="w-full h-full object-cover object-position-56-50"
        src="https://p7.itc.cn/q_70/images03/20210827/334d703278da4df0822326f7d31c9eed.jpeg"
      />
    </div>
    <div class="flex items-center justify-center w-full h-screen">
      <!-- 登录表单 -->
      <div class="max-w-360px bg-white p-10 lt-md:rounded lt-md:shadow">
        <div class="text-28px font-bold text-center p-6">
          {{ appConfig.title }}
        </div>
        <el-form :model="formData" ref="ref_form">
          <el-form-item
            prop="account"
            :rules="[
              { required: true, message: '请输入账号', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="formData.account"
              placeholder="请输入账号"
              clearable
            >
              <template #prefix>
                <Icon name="mdi:account" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
          >
            <el-input
              show-password
              clearable
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
            >
              <template #prefix>
                <Icon name="wpf:password1" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="passwordConfirm"
            :rules="[
              { required: true, message: '请再次输入密码', trigger: 'blur' },
              { validator: validator_passwordAgain, trigger: 'blur' },
            ]"
          >
            <el-input
              clearable
              show-password
              type="password"
              v-model="formData.passwordConfirm"
              placeholder="请再次输入密码"
            >
              <template #prefix>
                <Icon name="mdi:shield-key-outline" size="1.2em" />
              </template>
            </el-input>
          </el-form-item>
          <div class="flex justify-end items-center mb-4">
            <div>
              <el-link type="primary" :underline="false" href="/user/login"
                >登录</el-link
              >
            </div>
          </div>
          <S-msg :msg="callbackMessage" />
          <el-form-item>
            <el-button type="primary" class="w-full" @click="signUp(ref_form)"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
